<template>
    <div>
  <van-nav-bar
  title="分享我的菜谱"
  left-text="返回"
  right-text="发布"
  left-arrow
  @click-left="$router.go(-1)"
/>

     <div class="tx">
      <van-uploader :after-read="afterRead" v-model="fileList" :preview-image='false'>
        <van-image width="10rem" height="10rem" :src="imgs"/>
       <van-icon name="https://img1.baidu.com/it/u=3349242113,3078215819&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" size="30" class="tb"/>
      </van-uploader>
     </div>

<van-field v-model="cpname" label="菜谱名称：" />
<van-cell is-link @click="showPopup">菜谱类型：<span style="margin-left:9%;">{{leixing}}</span></van-cell>
<van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >
  <van-picker
  title="菜系"
  show-toolbar
  :columns="columns"
  @confirm="onConfirm"
  @cancel="onCancel"
  />
</van-popup>

<van-radio-group v-model="radio">
  <van-cell-group>
    <van-cell title="早餐" clickable @click="radio = '早餐'">
      <template #right-icon>
        <van-radio name="早餐" />
      </template>
    </van-cell>
    <van-cell title="午餐" clickable @click="radio = '午餐'">
      <template #right-icon>
        <van-radio name="午餐" />
      </template>
    </van-cell>
    <van-cell title="晚餐" clickable @click="radio = '晚餐'">
      <template #right-icon>
        <van-radio name="晚餐" />
      </template>
    </van-cell>
  </van-cell-group>
</van-radio-group>


<van-field
  v-model="message"
  rows="2"
  autosize
  label="简介"
  type="textarea"
  maxlength="50"
  placeholder="请简单介绍一下你的菜谱吧"
  show-word-limit
/>

<van-field
  v-model="zuofa"
  rows="5"
  autosize
  label="做法"
  type="textarea"
  maxlength="50"
  placeholder="教教大家怎么做的吧"
  show-word-limit
/>

<van-button round color="linear-gradient(to right, #ff6034, #ee0a24)" 
 style="width:80%;margin-left:10vw;margin-top:10vw;" @click="releaseltme">
 提交发布
</van-button>

    </div>
</template>

<script>
import { Picker } from 'vant';
import { Toast } from 'vant';
import {mapState} from 'vuex'
    export default {
        data() {
            return {
              radio:'',
                fileList:[],
                show:false,
                cpname:'',
                jieshao:'',
                zuofa:'',
                message:'',
                leixing:'',
                columns:['京菜','川菜','鲁菜','东北菜','湖北菜','粤菜','浙菜','湘菜'],
                count:'',
                imgs:''
            }
        },
        methods: {
             afterRead(file,detail) {
      // 此时可以自行将文件上传至服务器
        let formData = new FormData()
        formData.append('file',file.file)
        this.axios.post('/upload/upload',formData).then((res) =>{
        console.log(res)
         if(res.data.code == 200 ){
        this.fileList.splice(0,res.data.data)
        window.sessionStorage.setItem('url',res.data.data)
        this.imgs = res.data.data
          }
          })
        },
        showPopup(){
          this.show = true
        },
        onConfirm(value, index) {
          Toast(`选择成功：${value}`);
         this.count = index + 1
          this.leixing = value
          this.show = false
       },
     onCancel() {
       Toast('取消');
       this.show = false
    },
    //发布菜谱
    releaseltme(){
      // let params = `recipesName=${this.cpname}&recipesTypeId=${this.count}&resipesInfo=${this.message}&
      // recipesImge=${this.imgs}&recipesPractice=${this.zuofa}&createBy=${JSON.parse(sessionStorage.getItem('user')).id}&
      // classify=${this.radio}`
      let params = {'recipesName':this.cpname,'recipesTypeId':this.count,'recipesInfo':this.message,
       'recipesImage':this.imgs,'recipesPractice':this.zuofa,'createBy':JSON.parse(sessionStorage.getItem('user')).id,
       'classify':this.radio}
      console.log(params)
      let url = '/recipes/addRecipes'
      this.axios.post(url,params).then((res) => {
        console.log(res)
        if(res.data.code == 200){
          Toast.success('发布成功');
          this.$router.go(-1)
        }
      })
    }
     },
      
    
    }
</script>

<style lang="scss" scoped>
.tx{
    margin-left: 28%;
    position: relative;
     .tb{
    position: absolute;
    bottom:0vw;
    right: 0.5%;
  }
}
</style>